<template>
  <view>
    <view class="position-fixed left-0 right-0 main-bg-color" :style="{'z-index': 100}">
			<view class="flex align-center u-m-y-20 u-m-l-20">
				<view class="flex-1 u-p-r-20">
					<u-search v-model="key" animation @custom="custom" @search="custom" @clear="clear" :actionStyle="{color: '#fff'}" ></u-search>
				</view>
				<u-icon class="u-p-r-20" :name="!isGrid?'grid-fill': 'list'" color="#fff" size="60" @click="isGrid = !isGrid"></u-icon>
			</view>
			<dy-tabs :list="tabs" @click="tabSecendClick" @choice="choice"></dy-tabs>
    </view>
    <mescroll-body ref="mescrollRef" top="93px" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
      <view class="">
        <view class="flex flex-wrap justify-between u-m-20">
          <block v-for="(item,index) in goods" :key="index">
						<dy-goods-item-list :item="item" :isGrid="isGrid"></dy-goods-item-list>
          </block>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { GoodsCenterApi } from '@/api/serves.js'
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
				downOption:{
				  bgColor: '#f5f5f5',
					textColor: '#333'
				},
				tabs: [
					{
				    name: '综合',
				    sort: false,
				    goods: null,
				  },
				  {
				    name: '销量',
				    sort: false,
				    goods: null,
				  },
				  {
				    name: '价格',
				    sort: true,
				    goods: null,
				  }
				],
        secendTabIndex: 0, // 二级菜单下标
        key: '',
        formData: { //商品
					id:-1,
					types:'normal',
					name:'',
					is_merch: 0,
					goods_min_price:'',
					goods_max_price:'',
        },
				isGrid: true
      }
    },
    computed: {
      goods() {
        return this.tabs[this.secendTabIndex].goods
      },
    },
		onLoad(options) {
			this.formData.id = options.id || -1
		},
    methods: {
      // 二级菜单点击
      tabSecendClick(index) {
        this.secendTabIndex = index;
        let obj = {
          0: 'normal',
          1: 'sales',
          2: (!this.formData.types)?'price':(this.formData.types == 'price')?'max_price':'price'
        }
        this.formData.types = obj[index]
        console.log('搜索条件', this.formData);
        this.mescroll.resetUpScroll()
      },
      /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
      upCallback(page) {
				uni.showLoading()
        this.formData.page = page.num
        GoodsCenterApi.category_list(this.formData).then(res => {
					uni.hideLoading()
          console.log('商品数据', res);
          if (res.code == 1) {
            let currentTab = this.tabs[this.secendTabIndex]
            if(page.num == 1) currentTab.goods = []
            currentTab.goods = currentTab.goods.concat(res.data.listdata);
            this.mescroll.endByPage(res.data.listdata.length, res.data.pagedata.total); // 石佛欧有下一页
            // console.log('商品搜索',this.list[0].tabs[this.secendTabIndex]);
          }else {
          	this.$u.toast(res.msg);
          }
        }).catch(()=>{
        	//联网失败, 结束加载
        	this.mescroll.endErr();
        })
      },
      // 根据搜索内容搜索内容
      custom(key){ 
        // console.log('根据搜索内容搜索内容', key);
        this.formData.name = key
				this.mescroll.resetUpScroll()
      },
      clear() {
        this.key = ''
        this.formData.name = ''
        this.mescroll.resetUpScroll()
      },
			choice(min,max) {
				this.formData.goods_min_price = min
				this.formData.goods_max_price = max
				this.mescroll.resetUpScroll()
			},
			// 跳转商品详情
			toGoodsDetail(itemId) {
				uni.navigateTo({
				  url:'/pages/goodsDetail/commonGoodsDetail/commonGoodsDetail?goods_id='+ itemId
				})
			}
    },
  }
</script>

<style>
  .demo-tip {
    padding: 18rpx;
    font-size: 24rpx;
    text-align: center;
  }
</style>
